<template>
<div @click="copy">1111</div>
<p @click="isRead">222</p>
<div class="tinymce-editor">
    <textarea
    id="tinydemo"
      v-model="myValue"
    ></textarea>
  </div>
  <div class="tinymce-editor1">
    <textarea
      class="tinydemodisabled"
      v-model="mycalue1"
    ></textarea>
  </div>
</template>
<script setup>
import {ref, nextTick } from 'vue'
import tinymce from 'tinymce/tinymce'; //tinymce核心文件
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/skins/ui/oxide/skin.css'//样式
import 'tinymce/langs/zh_CN'; //引入编辑器语言包
import 'tinymce/themes/silver'; //默认主题
import 'tinymce/icons/default'; //引入编辑器图标icon，不引入则不显示对应图标
import 'tinymce/plugins/advlist'; //高级列表
import 'tinymce/plugins/autolink'; //自动链接
import 'tinymce/plugins/autoresize'; //编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
import 'tinymce/plugins/autosave'; //自动存稿
import 'tinymce/plugins/charmap'; //特殊字符
import 'tinymce/plugins/directionality'; //文字方向
import 'tinymce/plugins/image'; //插入编辑图片
import 'tinymce/plugins/imagetools'; //插入编辑图片
import 'tinymce/plugins/importcss'; //引入css
import 'tinymce/plugins/link'; //超链接
import 'tinymce/plugins/lists'; //列表插件
import 'tinymce/plugins/nonbreaking'; //插入不间断空格
import 'tinymce/plugins/pagebreak'; //插入分页符
import 'tinymce/plugins/preview'; //预览
import 'tinymce/plugins/save'; //保存
import 'tinymce/plugins/searchreplace'; //查找替换
import 'tinymce/plugins/table'; //表格
import 'tinymce/plugins/indent2em'; //缩进
const myValue = ref('')
nextTick(() => {
  tinymce.init({
      selector: '#tinydemo',
      language:'zh_CN',
      content_style: 'body { font-size: 16px; font-family: FangSong;line-height:1.5; }', // 设置默认样式
      plugins: `preview searchreplace autolink directionality image link imagetools indent2em table
      charmap pagebreak nonbreaking advlist autosave lists` , //引入工具插件
      toolbar: `preview forecolor backcolor bold italic underline lineheight fontselect fontsizeselect styles directionality searchreplace image link 
      alignleft aligncenter alignright indent2em table charmap pagebreak nonbreaking dvlist autosave subscript superscript insertCheckbox`, //工具栏显示
      lineheight_formats: '1 1.2 1.5 1.6 2 2.5 3', //行高
      fontsize_formats: '12px 14px 16px 18.0px 20.0px 22.0px 24.0px 28px 32px 36px 一号=24px 二号=20px 三号=18px 四号=12px', //字体大小
      font_formats:'微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
      setup: function (editor) {
        //复选框插入逻辑
        editor.ui.registry.addSplitButton('insertCheckbox', {
          icon:'selected',
          tooltip: '插入复选框',
          onAction: function () {
            editor.insertContent('☐');
          },
          onItemAction: function (api, value) {
            // 选择下拉项时插入图标
            editor.insertContent(value);
          },
          fetch: function (callback) {
            const items = [
              {type: 'choiceitem',text: '☐',value: '☐'},
              {type: 'choiceitem',text: '☑',value: '☑'}
            ]
            callback(items);
          },
        });
      }
  });

  tinymce.init({
    selector: '.tinydemodisabled',
    language:'zh_CN',
    readonly:true,
    menubar: false, // 隐藏菜单栏
    toolbar: '', // 隐藏工具栏
    // 其他配置项按需添加，比如插件等
    plugins: ''
  })
})


async function copy (){
  const editorElements = document.querySelectorAll('.tinydemodisabled')[0];
  const copyEditor = tinymce.get(editorElements.id)
  copyEditor.setMode('design')
  copyEditor.execCommand('selectall');
  copyEditor.execCommand('copy');
  copyEditor.selection.collapse();
  copyEditor.setMode('readonly');
}

function isRead() {
  const editorElements = document.querySelectorAll('.tinydemodisabled')[0];
  const copyEditor = tinymce.get(editorElements.id)
  const isReadonly = copyEditor.getParam('readonly') || false
}

const mycalue1 = '<p style="text-indent: 2em; line-height: 1.5;"><span style="font-size: 16px; font-family: 仿宋;">该公司对绿色制造体系的创建工作给予了极高的重视。他们深知绿色制造不仅是企业长期发展的基石，更是对社会和环境的责任担当。因此，从公司高层到基层员工，都积极参与到绿色制造的实践中来。</span></p>'
</script>
<style>
  .disablEditor {
    position: relative;
    left: 0;
    top: 0;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 998;
    pointer-events: none;
  }
</style>